<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8"/>
		<meta name="viewport" content="width=device-width,initial-scale=1">
		<!--上述2个meta标签必须放在最前面，任何其他内容都必须放在后面-->
		<title>CSS组件</title>
		<link rel="stylesheet" href="css/bootstrap.min.css"/>
		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
	</head>
	<body>
		<div class="container">
			<!--表单-->
			<form action="#" method="">
				<div class="form-group">
					<label for="name">姓名</label>
					<input type="text" id="name" class="form-control"placeholder="请输入姓名" />
				</div>
			</form>
			
			<form class="form-horizontal">
			<div class="form-group">
				<label for="name" class="col-sm-1 text-right">姓名</label>
				<div class="col-sm-11">
					<input type="text" id="name" class="form-control"placeholder="请输入姓名" />
				</div>
			</div>
			<div class="form-group">
				<label for="email" class="col-sm-1 text-right">邮箱</label>
				<div class="col-sm-11">
					<input type="text" id="email" class="form-control"placeholder="请输入邮箱" />
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-1 text-right">爱好</label>
				<div class="col-sm-11">
					<input type="checkbox"/>唱歌
					<input type="checkbox"/>跳舞
				</div>
			</div>
			</form>
			<!--输入框组-->
			<div class="input-group">
				<span class="input-group-addon">@</span>
				<input type="text" class="form-control" placeholder="Username">
			</div>
			<br />
			<div class="input-group">
				<input type="text" class="form-control" placeholder=""/>
				<span class="input-group-addon">
					百度一下
				</span>
			</div>
			<br />
			<div class="input-group">
				<span class="input-group-addon">￥</span>
				<input type="text" class="form-control">
				<span class="input-group-addon">.00</span>
			</div>
			<br />
			<!--图标-->
			<div class="input-group">
				<span class="input-group-addon">
					<span class="glyphicon glyphicon-earphone"></span>
				</span>
				<input class="form-control col-lg-2" type="text"/>
			</div>
			<span class="glyphicon glyphicon-asterisk"></span>
			<span class="glyphicon glyphicon-plus"></span>
			<span class="glyphicon glyphicon-euro"></span>
			<span class="glyphicon glyphicon-minus"></span>
			<span class="glyphicon glyphicon-cloud"></span>
			<span class="glyphicon glyphicon-envelope"></span>
			<span class="glyphicon glyphicon-pencil"></span>
			<span class="glyphicon glyphicon-glass"></span>
			<br />
			<span class="glyphicon glyphicon-music"></span>
			<span class="glyphicon glyphicon-search"></span>
			<span class="glyphicon glyphicon-heart"></span>
			<span class="glyphicon glyphicon-star"></span>
			<span class="glyphicon glyphicon-star-empty"></span>
			<span class="glyphicon glyphicon-user"></span>
			<span class="glyphicon glyphicon-film"></span>
			<span class="glyphicon glyphicon-th-large"></span>
			<br />
			<span class="glyphicon glyphicon-th"></span>
			<span class="glyphicon glyphicon-th-list"></span>
			<span class="glyphicon glyphicon-ok"></span>
			<span class="glyphicon glyphicon-remove"></span>
			<span class="glyphicon glyphicon-zoom-in"></span>
			<span class="glyphicon glyphicon-zoom-out"></span>
			<span class="glyphicon glyphicon-off"></span>
			<span class="glyphicon glyphicon-signal"></span>
			<br />
			<span class="glyphicon glyphicon-play"></span>
			<span class="glyphicon glyphicon-alert"></span>
			<span class="glyphicon glyphicon-adjust"></span>
			<span class="glyphicon glyphicon-align-center"></span>
			<span class="glyphicon glyphicon-apple"></span>
			<span class="glyphicon glyphicon-bed"></span>
			<span class="glyphicon glyphicon-baby-formula"></span>
			<span class="glyphicon glyphicon-chevron-down"></span>
			<span class="glyphicon glyphicon-duplicate"></span>
			<span class="glyphicon glyphicon-"></span>
		</div>
	</body>
</html>
